<template>
	<div>
		<div v-if="chapterList && chapterList.length > 0" class="q-error-analysis">
			<span class="q-style-type">【所属章节】</span>
			<span class="q-style-text">{{ chapterList.map(({ chapterName, chapterFullName }) => chapterFullName || chapterName).join(';') }}</span>
		</div>
		<div v-if="knowledgeList && knowledgeList.length > 0" class="q-error-analysis">
			<span class="q-style-type">【知识点】</span>
			<span class="q-style-text">{{ knowledgeList.map(({ knowledgeName }) => knowledgeName).join('※') }}</span>
		</div>
		<div v-if="labelStr" class="q-error-analysis">
			<span class="q-style-type">【标签信息】</span>
			<ve-parse class="q-style-text" :article="labelStr" />
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			isShowChapter: {
				type: Boolean,
				default: false
			},
			// 章节集合
			chapterList: {
				type: Array,
				default: () => []
			},
			isShowKnowledge: {
				type: Boolean,
				default: false
			},
			// 知识点集合
			knowledgeList: {
				type: Array,
				default: () => []
			},
			// 标签集合
			labelList: {
				type: Array,
				default: () => []
			},
			isShowLabel: {
				type: Boolean,
				default: false
			},
			// 地区集合
			areaList: {
				type: Array,
				default: () => []
			},
			// 使用年份集合
			applicableYear: {
				type: String,
				default: ""
			},
		},
		computed: {
			/**
			 * 是否显示
			 * 
			 * @returns {string} ret 是否显示
			 */
			show() {
				return this.isShowChapter && this.isShowKnowledge && this.isShowLabel;
			},
			/**
			 * 标签
			 * 
			 * @returns {string} ret 标签
			 */
			labelStr() {
				const t = [];
				if (this.applicableYear) {
					t.unshift(`试题年份：${this.applicableYear}`);
				}
				if (this.areaList && this.areaList.length > 0) {
					const [ { provinceName, cityName } ] = this.areaList;
					let str;
					if (cityName) {
						str = `所属地区：${ cityName.replace('市', '')}`;
					} else if (provinceName) {
						str = `所属地区：${provinceName.replace('省', '')}`;
					}
					if (this.areaList.length > 1) {
						str += `+${this.areaList.length - 1}`;
					}
					t.unshift(`${str}`);
				}
				if (this.labelList && this.labelList.length > 0) {
					t.push(...this.labelList.filter(({ labelName = '', labelDetailName = '' }) => labelName.length > 0 && labelDetailName.length > 0).map(({ labelName, labelDetailName }) => `${labelName}：${labelDetailName}`));
				}
				return t.length <= 0 ? '' : t.join('&ensp;');
			},
		}
	};
</script>

<style lang="less" scoped>
</style>
